<template>
  <div class="cloud_shop_sharePage">
    <c-title :hide="false" text="分享"></c-title>
    <!-- <van-tabs v-model="active">
      <van-tab title="海报"></van-tab>
    </van-tabs> -->
    <div class="posterBox">
      <template v-if="info.length == 1">
        <div v-for="(item, index) in info" :key="index">
          <div class="poster_lis" :class="{ lis_select: currentInd == index }">
            <img :src="item.poster" alt="" v-if="item.poster" />
            <img :src="item.image_url" alt="" v-else />
          </div>
          <div class="btn" @click="createPoster" v-if="!item.poster">生成海报</div>
        </div>
      </template>
      <swiper style="width: 100%;" :options="swiperOption" ref="mySwiper" v-else>
        <swiper-slide class="swiper-itemH" v-for="(item, index) in info" :key="index">
          <div class="poster_lis" :class="{ lis_select: currentInd == index }">
            <img :src="item.poster" alt="" v-if="item.poster" />
            <img :src="item.image_url" alt="" v-else />
          </div>
          <div class="btn" @click="createPoster" v-if="!item.poster">生成海报</div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    let that = this;
    return {
      currentInd: "",
      info: [],
      swiperOption: {
        loop: false,
        initialSlide: 0,
        direction: "horizontal",
        observer: true,
        watchOverflow: true,
        autoHeight: true,
        autoplay: false,
        pagination: false,
        slidesOffsetBefore: 62,
        slidesOffsetAfter: 62,
        slidesPerView: "auto",
        spaceBetween: 23,
        on: {
          init() {
            that.currentInd = 0;
          },
          slideChangeTransitionStart(e) {
            that.currentInd = this.activeIndex;
          }
        }
      }
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    async getData() {
      let { msg, data, result } = await $http.post("plugin.brand-market.frontend.poster.posterList", {}, "");
      if (result) {
        this.info = data;
      } else {
        this.$toast(msg);
      }
    },
    async createPoster() {
      let json = {
        brand_id: this.$route.params.brand_id,
        id: this.info[this.currentInd].id
      };
      if (this.$route.params.brand_collect_id) {
        json.brand_collect_id = this.$route.params.brand_collect_id;
      }
      let { msg, data, result } = await $http.post("plugin.brand-market.frontend.poster.createPoster", json, "");
      if (result) {
        // this.info[this.currentInd].poster = "";
        // this.info[this.currentInd].poster = data.url;
        this.$set(this.info[this.currentInd], "poster", data.url);
        console.log(this.info);
      } else {
        this.$toast(msg);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.cloud_shop_sharePage {
  min-height: 100vh;
  .btn {
    width: 8.75rem;
    height: 2.25rem;
    background: #f15353;
    border-radius: 1.13rem 1.13rem 1.13rem 1.13rem;
    font-weight: 500;
    font-size: 0.88rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.47rem;
    margin-left: 4.38rem;
  }
  .posterBox {
    margin-top: 2.84rem;
    display: flex;
    justify-content: center;
    .swiper-itemH {
      width: auto;
      margin: auto;
    }
    .poster_lis {
      width: 17.5rem;
      height: 23.38rem;
      background: #ffffff;
      border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
      // border: 0.03rem solid #d6d6dc;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
      }
    }
    .lis_select {
      height: 28.44rem;
    }
  }
}
</style>
